<template>
  <div>
    <h3>测试图表</h3>
    <v-chart :options="testChartOptions" />
  </div>
</template>

<script>
import { ref } from 'vue';
import VChart from 'vue-echarts';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from 'echarts/components';

// 注册必要的组件和渲染器
echarts.use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
]);

export default {
  components: {
    VChart
  },
  setup() {
    const testChartOptions = ref({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line'
        }
      ]
    });

    return {
      testChartOptions
    };
  }
};
</script>